/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as cx from 'classnames';
import * as InputRange from 'react-input-range';
// @require 'react-input-range/dist/react-input-range.css';
// jest 不能支持这种写法
// import 'react-input-range/dist/react-input-range.css';
import {Enhance as FormItem} from '../form-item';
import * as assign from 'object-assign';

@FormItem({
  type: 'range',
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
export default class RangeInput extends PureComponent {
  static propTypes = {
    className: PropTypes.string
  };

  static defaultProps = {
    min: 1,
    max: 100,
    step: 1
  };

  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.props.setValue(value);
  }

  render() {
    let {
      disabled,
      step,
      min,
      max,
      getValue,
      inputClassName,
      inline,
      width,
      height,
      style
    } = this.props;
    const value = parseInt(getValue(), 10) || 0;

    if (width || height) {
      style = assign({}, style, {
        width,
        height
      });
    }


    return (
      <div style={style} className={cx('input-range', 'padder-v', inputClassName || inline && 'w-auto')}>
        <InputRange
          key="input"
          value={Math.max(min, Math.min(max, value))}
          minValue={min}
          step={step}
          maxValue={max}
          disabled={disabled}
          onChange={(c, value) => this.handleChange(value)}
        />
      </div>
    );
  }
}